import { CssTheme } from "./theme.css/theme-css";

export const darkTheme = new CssTheme({
  intent: {
    color: {
      primary: {
        value: "#F75454",
      },
      info: {
        value: "#007ACC",
      },
    },
  },
  text: {
    color: {
      primary: {
        value: "#cccccc",
      },
      secondary: {
        value: "#ffffff",
      },
    },
  },
});
export const lightTheme = new CssTheme({
  intent: {
    color: {
      theme: {
        value: "#409eff",
      },
      primary: {
        value: "#2E51FF",
      },
      info: {
        value: "#E6E8EB",
      },
      error: {
        value: "#FF4D4D",
      },
      success: {
        value: "#67C23A",
      },
      warning: {
        value: "#E6A23C",
      },
    },
  },
  text: {
    color: {
      primary: {
        value: "#30373D",
      },
      regular: {
        value: "#999999",
      },
      secondary: {
        value: "#666666",
      },
      placeholder: {
        value: "#BBBCBF",
      },
      disabled: {
        value: "#BBBDBF",
      },
    },
  },
  shadow: {
    // 基础
    base: {
      shadows: [
        {
          // 水平阴影位置
          offsetX: -1,
          // 垂直阴影位置
          offsetY: 1,
          // 模糊距离,默认为0
          blur: 2,
          // 颜色,默认为黑色
          color: {
            value: "#e9e9eb",
          },
        },
      ],
    },
    dark: {
      shadows: [
        {
          // 水平阴影位置
          offsetX: -1,
          // 垂直阴影位置
          offsetY: 2,
          // 模糊距离,默认为0
          blur: 15,
          // 颜色,默认为黑色
          color: {
            value: "#dddddd",
          },
        },
      ],
    },
    // // 浅
    // light: {},
    // // 更浅
    // lighter: {},
    // // 深
    // dark: {}
  },
  font: {
    size: {
      // 超大字体
      extraLarge: 24,
      // 大号字体
      large: 18,
      // 中号字体
      medium: 16,
      // 基础字体
      base: 14,
      // 小号字体
      small: 12,
      // 超小字体
      extraSmall: 10,
    },
  },
  bg: {
    color: {
      light: {
        value: "#ffffff",
      } as any,
      dark: {
        value: "#000000",
      } as any,
      info: {
        value: "#f5f5f5",
      } as any,
    },
  },
});
